<template>
  <view class="container">
    <view class="nav-bar"></view>
    <image class="bg" src="/static/images/674-750x800.jpg" mode="widthFix" />
    <view class="upper-section">
      <view class="data-stats">
        <view>见过 {{learnedData?.seenCount || 0}}</view>
        <view>学过 {{learnedData?.alreadyCount || 0}}</view>
        <view>记住 {{learnedData?.rememberCount || 0}}</view>
      </view>
    </view>
    <view class="main-area">
      <view class="lower-section">
        <view class="word-book">
          <view class="word-book__img" v-if="wordBood?.imgUrl">
            <image mode="widthFix" alt="" :src="wordBood.imgUrl"></image>
          </view>
          <view class="word-book__info">
            <view class="word-book__list-name">
              <text>{{wordBood ? wordBood.listName : '未设置计划'}}</text>
              <view class="iconfont" @click="handleNavigate3('/pages/plan/change')">
                <text>{{myPlan?.childListId ? '修改' : '设置'}}</text>
                <text class="iconfont icon-youjiantoucu"></text>
              </view>
            </view>
            <view class="word-book__progress" v-if="myPlan?.childListId">24/234</view>
          </view>
        </view>
        <view class="favorite-button" @click="handleNavigate3('/pages/favorite/index')">
          <view class="favorite-button__icon">
            <text class="iconfont icon-danciben1"></text>
          </view>
          <view class="favorite-button__text">生词本</view>
        </view>
      </view>
      <view class="button-group">
        <view class="button primary" @click="handleLearnWords">
          <text>背10个词</text>
        </view>
        <view class="button secondary" @click="handleReviewWords">
          <text>复习3个词</text>
        </view>
      </view>
      <view class="grid">
        <view class="item" @click="handleNavigate('/pages/play/index')">
          <view class="icon">
            <text class="iconfont icon-moerduo"></text>
          </view>
          <view class="text">磨耳朵</view>
        </view>
        <view class="item" @click="handleNavigate('/pages/learn/video')">
          <view class="icon">
            <text class="iconfont icon-shipin"></text>
          </view>
          <view class="text">视频刷词</view>
        </view>
        <view class="item" @click="handleNavigate('/pages/learn/record')">
          <view class="icon">
            <text class="iconfont icon-huatong-L"></text>
          </view>
          <view class="text">跟读打分</view>
        </view>
        <view class="item" @click="handleNavigate('/pages/learn/spelling')">
          <view class="icon">
            <text class="iconfont icon-ziranpindu"></text>
          </view>
          <view class="text">自然拼读</view>
        </view>
        <view class="item" @click="handleNavigate('/pages/learn/word-list')">
          <view class="icon">
            <text class="iconfont icon-tupucibiao"></text>
          </view>
          <view class="text">词表刷词</view>
        </view>
        <view class="item" @click="handleNavigate('/pages/learn/online')">
          <view class="icon">
            <text class="iconfont icon-dancitingxie"></text>
          </view>
          <view class="text">单词听写</view>
        </view>
        <view class="item" @click="handleNavigate2('/pages/matching-game/index')">
          <view class="icon">
            <text class="iconfont icon-7danciduiduipeng"></text>
          </view>
          <view class="text">单词消消乐</view>
        </view>
        <view class="item" @click="handleNavigate3('/pages/phonetic-symbols/index')">
          <view class="icon">
            <text class="iconfont icon-yinbiao"></text>
          </view>
          <view class="text">音标</view>
        </view>
      </view>
    </view>
    <view class="tabbar">
      <view class="tab-item" :class="{ active: tabbarIndex === '0' }" @click="tabClick('0')">
        <uni-icons type="home" size="30"></uni-icons>
        <text>首页</text>
      </view>
      <view class="tab-item" :class="{ active: tabbarIndex === '1' }" @click="tabClick('1')">
        <text class="icon iconfont icon-shipin" style="font-size: 44rpx; line-height: 44rpx;"></text>
        <text>视频刷词</text>
      </view>
      <view class="tab-item" :class="{ active: tabbarIndex === '2' }" @click="tabClick('2')">
        <text class="icon iconfont icon-ziranpindu" style="font-size: 44rpx; line-height: 44rpx;"></text>
        <text>自然拼读</text>
      </view>
      <view class="tab-item" :class="{ active: tabbarIndex === '3' }" @click="tabClick('3')">
        <uni-icons type="person" size="30"></uni-icons>
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onReady } from '@dcloudio/uni-app'
import { useAxios } from "../../hooks/useAxios";
import { useAppStore } from '@/store/app'

const { auth, account, cache, updateCache } = useAppStore()
const isLogin = ref(auth.isLogin)
const myPlan = ref(account.myPlan)
const tabbarIndex = ref(cache.tabbarIndex)
const wordBood = ref(account.wordBood)


const [runAsync, { loading }] = useAxios('/word/words/study-list/check', 'get');
const [onGetLearned, { data: learnedData }] = useAxios('/account/plan/alreadyStudy');

const tabClick = (val) => {
  tabbarIndex.value = val;
  switch (val) {
    case '0':
      uni.switchTab({ url: '/pages/index/index' })
      break;
    case '1':
      uni.navigateTo({ url: '/pages/word/select?nextPath=/pages/learn/video' });
      break;
    case '2':
      uni.navigateTo({ url: '/pages/word/select?nextPath=/pages/learn/spelling' })
      break;
    case '3':
      uni.switchTab({ url: '/pages/member/index' })
      break;
  }
}

const handleNavigate = (nextPath) => {
  if (!myPlan.value?.listId) return uni.showToast({ title: '请先设置计划', icon: 'none' })
  updateCache({ nextPath })
  uni.navigateTo({ url: '/pages/word/select' })
}
const handleNavigate2 = (nextPath) => {
  if (!myPlan.value?.listId) return uni.showToast({ title: '请先设置计划', icon: 'none' })
  uni.navigateTo({ url: nextPath })
}
const handleNavigate3 = (nextPath) => {
  uni.navigateTo({ url: nextPath })
}

const handleReviewWords = () => {
  if (!myPlan.value?.listId) return uni.showToast({ title: '请先设置计划', icon: 'none' })
  uni.navigateTo({ url: '/pages/learn/index?type=preview&num=3' })
}

const handleLearnWords = async () => {
  if (!myPlan.value?.listId) return uni.showToast({ title: '请先设置计划', icon: 'none' })
  const { shouldSelect } = await runAsync()
  if (!shouldSelect) return uni.navigateTo({ url: '/pages/learn/index' })
  updateCache({ nextPath: '/pages/learn/index' })
  uni.navigateTo({ url: '/pages/word/select' })
}

onReady(() => {
  if (isLogin.value && myPlan.value) {
    if (!myPlan.listId) {
      uni.showToast({ title: '请先设置计划', icon: 'none' })
      setTimeout(() => {
        uni.navigateTo('/pages/plan/change')
      }, 800)
    }
    onGetLearned({ type: 3 })
  }
  uni.showToast({ title: '请先设置计划', icon: 'none' })
  uni.hideTabBar()
})
</script>

<style lang="scss" scoped>
/* 容器样式 */
.container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  /* 导航栏 */
  .nav-bar {
    background: transparent;
  }
  /* 上半部分样式 */
  .upper-section {
    padding: 0 40rpx;
    padding-bottom: 33rpx;
    height: 550rpx;
    position: relative;

    /* 数据统计条 */
    .data-stats {
      box-sizing: border-box;
      position: absolute;
      bottom: 55rpx;
      width: 670rpx;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10rpx);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12rpx 36rpx;
      border-radius: 50rpx;
      font-size: 28rpx;
      color: white;
    }
  }

  /* 下半部分样式 */
  .lower-section {
    background: white;
    padding: 0 32rpx;
    padding-bottom: 32rpx;
    position: relative;
    /* 单词书样式 */
    .word-book {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      //border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
      padding-bottom: 30rpx;
      margin-bottom: 30rpx;
      /* 单词书图片 */
      .word-book__img {
        width: 140rpx;
        height: 190rpx;
        border-radius: 6rpx;
        overflow: hidden;
        img {
          width: 100%;
        }
      }

      /* 单词书信息 */
      .word-book__info {
        flex: 1;
        margin-left: 20rpx;
        padding-top: 14rpx;
        min-height: 138rpx;
      }

      .word-book__list-name {
        color: rgba(0, 0, 0, 0.8);
        font-size: 32rpx;
        display: flex;
        align-items: center;
        .iconfont {
          margin-left: 12rpx;
          font-size: 26rpx;
          color: rgba(0, 0, 0, 0.6);
        }
      }

      .word-book__progress {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.4);
        margin-bottom: 24rpx;
      }
    }

    /* 生词本按钮 */
    .favorite-button {
      width: 100rpx;
      position: absolute;
      right: 32rpx;
      top: 0;
      .favorite-button__icon {
        width: 100rpx;
        height: 100rpx;
        background: linear-gradient(to bottom right, #fbfbfb, #f5f5f5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont {
          font-size: 40rpx;
        }
      }

      .favorite-button__text {
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.4);
        text-align: center;
      }
    }
  }

  /* 下半部分顶部装饰 */
  .lower-section::before {
    content: '';
    background: white;
    border-radius: 30rpx 30rpx 0 0;
    height: 40rpx;
    position: absolute;
    top: -36rpx;
    left: 0;
    right: 0;
  }
}

/* 容器样式 */
.main-area {
  background-color: #ffffff;
  padding: 32rpx;
  padding-bottom: 32rpx;
  position: relative;

  /* 顶部装饰 */
  &::before {
    content: '';
    background-color: #ffffff;
    border-radius: 30rpx 30rpx 0 0;
    height: 40rpx;
    position: absolute;
    top: -38rpx;
    left: 0;
    right: 0;
  }

  /* 按钮区域 */
  .button-group {
    display: flex;
    align-items: center;
    gap: 20rpx;
    margin-bottom: 30rpx;

    .button {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50rpx;
      margin: 0;
      padding: 10px;
      flex: 1;

      &.primary {
        background-color: #2960b0;
        color: #ffffff;
      }

      &.secondary {
        font-weight: bold;
        background-color: #ffffff;
        color: rgba(0, 0, 0, 0.8);
        border: 1rpx solid #dfdfdf;
      }
    }
  }

  /* 网格区域 */
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30rpx;

    .item {
      text-align: center;

      .icon {
        background-color: #f8f8f8;
        border-radius: 50%;
        width: 100rpx;
        height: 100rpx;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .text {
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.4);
      }
    }
  }
}
/* Tabbar 样式 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10rpx 0;
  z-index: 1000;

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-size: 24rpx;

    &.active {
      color: #2960b0;
    }

    .icon {
      font-size: 44rpx;
      line-height: 44rpx;
      margin-bottom: 4rpx;
    }
  }
}

</style>
